<!doctype html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <title>BLOG OF SUOYAO.SHEN</title>
  <meta name="description" content="">
  <meta name="author" content="Christoph Ono">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <link rel="stylesheet" href="/site_media/css/waterfall.css">
</head>

<body>
	<div id="header">
		<div id="header-box" class="clearfix"><a href="/home/" class="nav">主页</a></div>
		<div id="header-box" class="clearfix"><a href="/links/" class="nav">推荐链接</a></div>
		<div id="header-box" class="clearfix"><a href="/about/" class="nav">关于我</a></div>
	</div>
	<div id="post-tags">
		{% for album in album_preview_list %}
			<a id="{{ album.album_id }}" href="javascript:;" title="{{ album.description }}" onclick="changeAlbum({{ album.album_id }});">{{ album.name }}</a>
		{% endfor %}
	</div>
	<div id="container">
		{% for photo in photos_list %}
			<div class="item">
				<div class="post-thumbnail"><a href="javascript:;"><img src="/site_photos/{{ photo.thumbnail }}" /></a></div>
				<div class="post-title">{{ photo.caption }}</div>
			</div>
		{% endfor %}
  </div>
  <div id="loader">
  	  <div id="loaderCircle"></div>
  </div>
  <!-- include jQuery -->
  <script src="/site_media/js/jquery/jquery-1.7.2.min.js"></script>
  <!-- Include the plug-in -->
  <script src="/site_media/js/masonry/jquery.masonry.min.js"></script>
  <script type="text/javascript">
  	var page = 0;
  	var isLoading = false;
  	var album_id;
  	$(document).ready(new function() {
  		//waterfall init
  		$('#container').masonry({
			// options
			itemSelector : '.item',
			itemumnWidth : 240,
			isAnimated: true,
		    animationOptions: {
				duration: 750,
				queue: false
		    }
		});
        // Capture scroll event.
        $(document).bind('scroll', onScroll);
      
        // Load first data from the API.
        album_id = $("#post-tags").children("a").attr("id");
        loadData();
    });
  	
  	/**
     * When scrolled all the way to the bottom, add more tiles.
     */
    function onScroll(event) {
        // Only check when we're not still waiting for data.
        if(!isLoading) {
        	// Check if we're within 100 pixels of the bottom edge of the broser window.
        	var closeToBottom = ($(window).scrollTop() + $(window).height() > $(document).height() - 100);
        	if(closeToBottom) {
            	loadData();
        	}
        }
    };
  	
  	/**
     * Loads data from the API.
     */
    function loadData() {
    	$('#loaderCircle').show();
    	isLoading = true;
        $.ajax({
        	url: '/loadPhotos/' + album_id + '/' + page + '/',
        	dataType: 'json',
        	data: '', // Page parameter to make sure we load new data
        	success: onLoadData
        });
    };
    
    /**
     * Receives data from the API, creates HTML for images and updates the layout
     */
    function onLoadData(data) {
    	if (data.length == 0) {
    		isLoading = true;
    		$('#loaderCircle').hide();
    		return;
    	}
    	isLoading = false;
    	$('#loaderCircle').hide();
      
    	// Increment page index for future calls.
    	page++;
      
    	// Create HTML for the images.
        var html = '';
        var i=0, length=data.length, image;
        for(; i<length; i++) {
        	image = data[i];
        	html += '<div class="item">';
        	html += '<div class="post-thumbnail">';
        	html += '<a href="javascript:;"><img src="/site_photos/' + image.fields.thumbnail + '" /></a>';
        	html += '</div>';
        	html += '<div class="post-title">' + image.fields.caption + '</div>';
        	html += '</div>';
        }
      
        // Add image HTML to the page.
        $('#container').append(html).masonry( 'reload' );
    };
    
    //change album photos
    function changeAlbum(albumid) {
    	page = 0;
    	isLoading = false;
    	album_id = albumid;
    	$("#container").empty();
    	loadData();
    }
  	
  </script>
</body>
</html>